<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户管理</title>
    <link rel="stylesheet" href="frame/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/common.css" media="all">
    <link rel="stylesheet" href="css/menuManage.css" media="all">
</head>
<body>
    <div class="wrapper">
        <div class="user-header">
            <ul class="selected-condition02 clearfix">
                <li class="li1">
                    <span>菜单名称：</span>
                    <input type="text"/>
                </li>
                <li class="user-state">
                    <span>菜单状态：</span>
                     <div class="user-state-selet">
                        <form class="layui-form" action="" lay-filter="menuStatus">
                            <div class="layui-form-item">
                                <div class="layui-input-inline expire-city">
                                    <select class="menu-status" lay-filter="menuS" name="menuStat">
                                        <option value="0">所有</option>
                                        <option value="1">普通</option>
                                        <option value="2">特技</option>
                                    </select>
                                </div>
                            </div>
                        </form>  
                    </div>
                </li>
                <li class="btn-selected">
                    <button class="search-btn">搜索</button>
                </li>
            </ul>
        </div>

        <div class="user-main">
            <div class="user-main-header clearfix">
                <div class="fl operate">
                    <span class="added"><i class="iconfont icon-icon"></i>新增</span>
                </div>
            </div>
            <!-- tabal -->
            <div class="menutable">
                <ul class="menu-table-header clearfix">
                    <li>菜单名称</li>
                    <li>排序</li>
                    <li>请求地址</li>
                    <li>类型</li>
                    <li>可见</li>
                    <li>权限标识</li>
                    <li>操作</li>
                </ul>
                <div class="menu-main">
                    <ul class="first-ul clearfix">
                        <li class="first-li"><i class="iconfont icon-zuoyou"></i>系统管理</li>
                        <li>1</li>
                        <li>www</li>
                        <li class="types-li"><span class="green">目录</span></li>
                        <li class="show-li"><span class="green">显示</span></li>
                        <li>viewddddd</li>
                        <li class="opeate-li">
                            <span class="edit-span"><i class="iconfont icon-bianji"></i>编辑</span>
                            <span><i class="iconfont icon-jia1"></i>新增</span>
                            <span class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                        </li>

                        <ul class="two-ul clearfix hide">
                            <li class="two-li"><i class="iconfont icon-zuoyou"></i>系统管理two</li>
                            <li>1</li>
                            <li>www</li>
                            <li class="types-li"><span class="yellow">目录</span></li>
                            <li class="show-li"><span class="green">显示</span></li>
                            <li>viewddddd</li>
                            <li class="opeate-li">
                                <span class="edit-span"><i class="iconfont icon-bianji"></i>编辑</span>
                                <span><i class="iconfont icon-jia1"></i>新增</span>
                                <span class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                            </li>

                            <ul class="three-ul clearfix hide">
                                <li class="three-li">系统管理three</li>
                                <li>1</li>
                                <li>www</li>
                                <li class="types-li"><span class="blue">目录</span></li>
                                <li class="show-li"><span class="green">显示</span></li>
                                <li>viewddddd</li>
                                <li class="opeate-li">
                                    <span class="edit-span"><i class="iconfont icon-bianji"></i>编辑</span>
                                    <span><i class="iconfont icon-jia1"></i>新增</span>
                                    <span class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                                </li>
                            </ul>

                            <ul class="three-ul clearfix hide">
                                <li class="three-li">系统管理three</li>
                                <li>1</li>
                                <li>www</li>
                                <li class="types-li"><span class="blue">目录</span></li>
                                <li class="show-li"><span class="green">显示</span></li>
                                <li>viewddddd</li>
                                <li class="opeate-li">
                                    <span class="edit-span"><i class="iconfont icon-bianji"></i>编辑</span>
                                    <span><i class="iconfont icon-jia1"></i>新增</span>
                                    <span class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                                </li>
                            </ul>

                        </ul>

                        <ul class="two-ul clearfix hide">
                            <li class="two-li"><i class="iconfont icon-zuoyou"></i>系统管理two</li>
                            <li>1</li>
                            <li>www</li>
                            <li class="types-li"><span class="yellow">目录</span></li>
                            <li class="show-li"><span class="green">显示</span></li>
                            <li>viewddddd</li>
                            <li class="opeate-li">
                                <span class="edit-span"><i class="iconfont icon-bianji"></i>编辑</span>
                                <span><i class="iconfont icon-jia1"></i>新增</span>
                                <span class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                            </li>

                            <ul class="three-ul clearfix hide">
                                <li class="three-li">系统管理three</li>
                                <li>1</li>
                                <li>www</li>
                                <li class="types-li"><span class="blue">目录</span></li>
                                <li class="show-li"><span class="green">显示</span></li>
                                <li>viewddddd</li>
                                <li class="opeate-li">
                                    <span class="edit-span"><i class="iconfont icon-bianji"></i>编辑</span>
                                    <span><i class="iconfont icon-jia1"></i>新增</span>
                                    <span class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                                </li>
                            </ul>

                            <ul class="three-ul clearfix hide">
                                <li class="three-li">系统管理three</li>
                                <li>1</li>
                                <li>www</li>
                                <li class="types-li"><span class="blue">目录</span></li>
                                <li class="show-li"><span class="green">显示</span></li>
                                <li>viewddddd</li>
                                <li class="opeate-li">
                                    <span class="edit-span"><i class="iconfont icon-bianji"></i>编辑</span>
                                    <span><i class="iconfont icon-jia1"></i>新增</span>
                                    <span class="users-deletes"><i class="iconfont icon-delete2"></i>删除</span>
                                </li>
                            </ul>

                        </ul>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 新增 -->
<div id="added--edit-user">
    <div class="added--edit-user-class">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">上级菜单：</label>
                <div class="layui-input-block">
                    <input type="text" name="higher-up" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单类型：</label>
                <div class="layui-input-block">
                    <input type="radio" name="menu-tyoe" value="0" title="目录" checked>
                    <input type="radio" name="menu-tyoe" value="1" title="菜单"> 
                    <input type="radio" name="menu-tyoe" value="2" title="按钮"> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="menuName" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">显示排序：</label>
                <div class="layui-input-block">
                    <input type="text" name="showOder" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="menu-sate" value="0" title="显示" checked>
                    <input type="radio" name="menu-sate" value="1" title="隐藏">
                </div>
                </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="frame/jquery.min.js"></script>
<script type="text/javascript" src="frame/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['layer', 'form', 'laydate', 'laypage'], function() {
    var layer = layui.layer,
        laypage = layui.laypage,
        form = layui.form;
    var laydate = layui.laydate;

    // 编辑
    $(document).on('click', '.edit-span', function() {
        layer.open({
            title: '修改菜单',
            maxmin: true,
            type: 2,
            content: '#added--edit-user',
            area: ['60%', '90%']
            ,btn: ['提交', '关闭']
            ,yes: function(index, layero){
               
                layer.close(index);
            }
            ,btn2: function(index, layero){
                //按钮【按钮二】的回调
                // return false
            }
            ,cancel: function(){ 
                //右上角关闭回调
                
                //return false 开启该代码可禁止点击该按钮关闭
            }
            ,btnAlign: 'r'
            ,resize: false
        });
    });
    // 删除
    $(document).on('click', '.users-deletes', function(){
        layer.open({
            title: '提示',
            content: '是否删除？',
            btn: ['确认', '否'],
            yes: function(index, layero){
                //do something
                layer.close(index); //如果设定了yes回调，需进行手工关闭
                
            },
            btn2: function(index, layero){
                layer.close(index);
            },
            cancel: function(index, layero){ 
                layer.close(index);
            }    
        }); 
    })

    // 菜单展示
   $(document).on('click', '.first-li', function(){
       if ($(this).siblings('ul').hasClass('hide')) {
           $(this).siblings('ul').removeClass('hide');
           $(this).find('i').removeClass('icon-zuoyou').addClass('icon-zuoyou-copy');
       } else {
           $(this).siblings('ul').addClass('hide');
           $(this).find('i').addClass('icon-zuoyou').removeClass('icon-zuoyou-copy');
       }
   })
    
   $(document).on('click', '.two-li', function(){
       if ($(this).siblings('ul').hasClass('hide')) {
           $(this).siblings('ul').removeClass('hide');
           $(this).find('i').removeClass('icon-zuoyou').addClass('icon-zuoyou-copy');
       } else {
           $(this).siblings('ul').addClass('hide');
           $(this).find('i').addClass('icon-zuoyou').removeClass('icon-zuoyou-copy');
       }
   })



});
</script>
</html>